/**
 * @file 自定义样式地图
 */
import "assets/styles/common/index.less";
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import { createXYZ } from 'ol/tilegrid';
import WMTS from 'ol/tilegrid/WMTS';
import { get, fromLonLat } from 'ol/proj';
import Projection from 'ol/proj/Projection';
import TileWMS from 'ol/source/TileWMS';
import { applyBackground, apply } from "ol-mapbox-style";
import stylefunction from 'ol-mapbox-style/dist/stylefunction';
import View from 'ol/View'
import MVT from "ol/format/MVT";
import styleJson from './style5.json'

const vectorLayer = new VectorTileLayer({
  source:new VectorTileSource({
      format: new MVT(),
      url: 'http://localhost:9999/{z}/{x}/{-y}.pbf',
      wrapX: false,
      wrapY: false
  }),
});
stylefunction(vectorLayer, styleJson, 'openmaptiles')
const map = new Map({
  layers: [
    vectorLayer
  ],
  target: 'map',  // 将地图和页面标签元素关联
  view: new View({  // 创建视图, 类似于望远镜, 我们通过望远镜看地图，可以拉近也可以拉远
    projection: 'EPSG:3857',
    center: fromLonLat([121.5452456474304, 29.87544350296635], 'EPSG:3857'), // 默认中心点
    zoom: 6,  // 默认缩放级别
  }),
});
applyBackground(map, styleJson)